<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>hang</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            width:100%;
            height:100%;
        }
        body{
            background-image: url(./img/bg_all.png);
        }

        .start_Btn{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width: 25vw;
            height:18vw;
            text-align: center;
            line-height: 18vw;
            background-color: #4f834f;
            color: #fff;
            border-radius: 2vw;
            display: none;
            font-size: 6vw;
            box-shadow: 2px 6px 8px #34303052;
        }
        .up_load_list{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            width: 58vw;
            background-color: #ffffff;
            border-radius: 2vw;
            box-shadow: 2px 4px 6px #34303052;
        }
        .up_load_hide_list{
            height: 80vw;
            overflow-y: scroll;
            background-color: #ffffff;
            width: 100%;
            border-bottom: 1px solid #9f5c2f;
        }
        .up_load_hide_img{
            width:20vw;
            max-height: 8vw;
            margin-left: 4vw;
        }
        .up_load_grade{
            vertical-align: top;
            font-size: 4vw;
            height:8vw;
            line-height: 8vw;
            display: inline-block;
            color: #9a4608;
            margin-left: 2vw;
        }
        .up_load_type{
            font-size: 4vw;
            height:8vw;
            line-height: 8vw;
            display: inline-block;
            vertical-align: top;
            color: #9a4608;
            margin-left: 2vw;
        }
        .up_load_box{
            padding-bottom: 2vw;
            margin-top: 2vw;
            height:8vw;
            line-height: 8vw;
            /*border-bottom: 1px solid #9a4608;*/
        }
        .collect_list_header{
            text-align: center;
            font-size: 6vw;
            padding-bottom: 4vw;
            padding-top: 2vw;
            font-weight: bold;
            color:#9a4608;
        }
        .up_load_btn_a{
            width: 80%;
            height: 8vw;
            line-height: 8vw;
            background-color: #9a4608;
            color:#ffffff;
            border-radius: 2vw;
            text-align: center;
            margin:  4vw auto 2vw;
            border-top:1px solid #9f5c2f;
        }
    </style>
    <link rel="stylesheet" href="./css/loading.css">
    <link rel="stylesheet" href="./css/new_html.css">
</head>
<body>
    <div class="header clearfix">
        <span style="padding-left: 15vw">随风而遇</span>
        <div class="shuiyuank">
            发随缘卡
        </div>
    </div>

    <div class="cover_canvas clearfix">
        <div class="cover_canvas_lv">
            LV:1
        </div>
        <div class="cover_canvas_left">
            <img src="./img/time.png" alt="" class="cover_time">
            <span class="next_p">下一波:
                <span class="inner_time" id="time">
                                100
                </span>
                <span>
                    s
                </span>
            </span>
        </div>
        <div class="cover_canvas_right">
            我的收集
        </div>
    </div>

    <!--开始btn-->
    <div class="start_Btn">
        开始
    </div>

    <!--开始btn-->
    <!--close-->
    <div class="up_load_list" style="display: none;">
        <div class="collect_list_header">
            收集列表
        </div>
        <ul class="up_load_hide_list">

        </ul>
        <div class="up_load_btn_a">
            提交记录
        </div>
    </div>

    <!---->
    <canvas id="canvas" width="400" height="300">

    </canvas>
    <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
<script>

    var canvas = document.getElementsByTagName('canvas')[0];
    var header = document.getElementsByClassName("header")[0];
    var header_l = window.getComputedStyle(header,null).height;
    var nav = document.getElementsByClassName("cover_canvas")[0];
    var nav_l = window.getComputedStyle(nav,null).height;

    var start_Btn = document.getElementsByClassName("start_Btn")[0];

    canvas.width  =  document.body.clientWidth;
    canvas.height = document.body.clientHeight - parseInt(nav_l.replace("px",""))- parseInt(header_l.replace("px",""));

</script>
    <script src="./js/axios.js"></script>
    <script src="./js/wx_func.js"></script>
    <script>
        // 用于表示球的所有细节的Ball函数
        var pre_load_list = [];
        var img_list = [];
        var flag_preload = 0;
        var flag_ok = false;
        var pre_load_length;
        var click_list = [];
        var show_obj_time ;
        var count_time = 100;
        var loading = document.getElementsByClassName('loading')[0];

        // 这个数组用于保存画布上出现的所有球
        var balls = [];
        var current_w = document.body.clientWidth;
        var canvas;
        var context;
        var random;
        var img;
        var ani_show_list = [];

        //我的收集
        var cover_canvas_right = document.getElementsByClassName("cover_canvas_right")[0];
        //up_load_hide_list
        var up_load_hide_list  = document.getElementsByClassName("up_load_hide_list")[0];
        var up_load_list = document.getElementsByClassName("up_load_list")[0];
        //提交按钮
        var up_load_btn_a = document.getElementsByClassName("up_load_btn_a")[0];

        //重写alert
        rewrite_alert();

        var user_id = location.search.split("=")[1];
        sessionStorage.setItem("user_id",user_id);
        //up_load_btn_a
        up_load_btn_a.addEventListener("click",function () {
            up_load_btn_a_f();
        })
        //开始
        start_Btn.addEventListener("click",function () {
            this.style.display="none";
            init();
        })
        //shuiyuank
        var shuiyuank = document.getElementsByClassName("shuiyuank")[0];
        shuiyuank.addEventListener("click",function () {
                window.location.href="./sy_card.html?user_id="+user_id;
        });

        cover_canvas_right.addEventListener("click",function(){
            var user_id = location.search.split("=")[1];
            window.location.href = "./my_collect.html?user_id="+user_id;
        });

        //时间 修改 方式
        var time_data = {};
        Object.defineProperty(time_data, "time", {
            get: function(){
                return document.getElementById('time').innerText;
            },
            set: function(nick){
                document.getElementById('time').innerText = nick;
            }
        });

        //时间 count
        function count_time_f() {
          var   count_time_f_t = setInterval(function () {
                time_data.time = --count_time;
                if(count_time == 0){clearInterval(count_time_f_t)}
            },1000)
        }

        //兼容 写法
        window.requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

        //get mess
        axios.get('/yizhiweimen/api/user/withTheWindIn/getFloatData')
             .then(function (response) {
                img_list = response.data;
                console.log(img_list);
                preload_more();
             })
             .catch(function (error) {
                console.log(error);
             });


        //preload
        function preload_more() {
           pre_load_length = img_list.length;
           for(var x= 0; x < pre_load_length; x++){
               preload(img_list[x].image,img_list[x].id,img_list[x].type,img_list[x].grade);//单个 preload
           }
        }

        //单个 preload
        function preload(src,id,type,grade) {
           var img = new Image();
            img.onload = function () {
//              console.log('%c'+img.src,'background: #222; color: #bada55')
//              console.log(img.src)
                pre_load_list.push({
                    img:img,
                    id:id,
                    type:type,
                    grade:grade
                });
                flag_preload += 1;
            };
            if( !~src.indexOf("yizhiweimen")){
                img.src = "https://wx.yizhiweimeng.com/yizhiweimen/image/" + src;
            }else {
                img.src = "https://wx.yizhiweimeng.com" + src;
            }
//          console.log("src____")
//          console.log(src)
        }

       //每100 毫秒 检查 有点sb的 这东西
       var time = setInterval(function () {
            if(flag_preload == pre_load_length){
                flag_ok = true;
                clearTimeout(time);
                loading.style.display = 'none';
//                init();
                start_Btn.style.display= "block";
            }
        },100);
        //preload

        //提交 信件
        function up_load_btn_a_f() {
            console.log("up_load_btn_a")
            var user_id = location.search.split("=")[1];
            var temp_list ={"callBackTypes":[],uid:''};
            var temp_c=""
            for(var cc=0;cc<ani_show_list.length;cc++){
                temp_c ={typestring:ani_show_list[cc].type,id:ani_show_list[cc].id};
                temp_list.callBackTypes.push(temp_c)
            }
            temp_list.uid = user_id;

            var data = "uid="+user_id+"&List<CallBackType>="+temp_list;
            axios.post('/yizhiweimen/api/user/withTheWindIn/addToCollection'
                ,JSON.stringify(temp_list),
                {headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                }}
            )
                .then(function (response) {
                     alert(response.data);
                     window.location.href= "./my_collect.html?user_id="+user_id;
                    //preload_more();
                })
                .catch(function (error) {
                    console.log(error);
                });
        }
        //初始化动画
        function  init() {
            var cc = 1;
            show_obj_time = 100 * 1000 / pre_load_length; //物体出现时间间隔

            var add_b = setInterval(function () {//添加显示
                addBall(pre_load_list[cc]);
                cc++;

                if(cc == pre_load_length ){//出现完了
                    clearInterval(add_b);
                    //get mess
//                    start_Btn.style.backgroundColor = "red";
//                    start_Btn.style.display="block";
                    up_load_list.style.display= "block";
                    up_load_list_show()
//                  /api/user/withTheWindIn/addToCollection
                }
            },show_obj_time);
              count_time_f();//count_time 开始
        }

        //显示点击过的
        function up_load_list_show(){
            var temp= ""
            for(var x = 0 ;x<ani_show_list.length;x++){
                temp +=' <li class="up_load_box">'+
                        '<img src="'+ani_show_list[x].img.src+'" class="up_load_hide_img">'+
                        '<span class="up_load_grade">'+ani_show_list[x].grade+'</span>'+
                        '<span class="up_load_type">'+ani_show_list[x].type+'</span>'+
                        '</li>'
            }
            up_load_hide_list.innerHTML = temp;
        }



        function set_defp(obj,obj_prop) {
            Object.defineProperty(obj, obj_prop, {
                get: function(){
                    return obj[obj_prop];
                },
                set: function(nick){
                   obj[obj_prop] = nick;
                }
            });
        }
        
        function cover_img(x, y, dx, dy, radius,img,id,type,grade) {
            this.x = x;
            this.y = y;
            this.dx = dx;
            this.dy = dy;
            this.radius = radius;
            this.height = radius+50;
            this.width = radius+10;
            this.strokeColor = "black";
            this.fillColor = "red";
            this.img = img;
            this.id=id;
            this.type = type;
            this.grade = grade;
        }

        window.onload = function() {
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");
            canvas.onmousedown = canvasClick;
            // 每0.02秒绘制一次画布
            window.requestAnimFrame(drawFrame);
            //setTimeout(drawFrame, 1000/60);
        };

        function addBall(obj) {
            rand_x = Math.round( 60 + Math.random() * (current_w - 215) );
            // 小球半径
            var radius = 80;
            // 创建新的ball对象
            var ball = new cover_img(rand_x,0,2,2,radius,obj.img,obj.id,obj.type,obj.grade);
//            var new_ball ={};
//
//            for(var p in ball){
//                console.log("ball____________")
//                console.log(ball[p])
//                set_defp(new_ball,p);
////                new_ball[p] = ball[p]
//            }
//            console.log("new_ball______")
//            console.log(new_ball)
            // 将其保存在balls数组中
            balls.push(ball);
        }

        function clearBalls() {
            // 删除所有球对象
            balls = [];
        }

        function drawFrame() {
            // 清除画布
            context.clearRect(0, 0, canvas.width, canvas.height);

            // 循环所有的球
            for(var i=0; i<balls.length; i++) {
                // 把每个球移动到新的位置
//                ball.x += ball.dx;
                var ball = balls[i];
                ball.y += ball.dy;
                // 绘制球
//              context.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
                context.drawImage(ball.img, ball.x, ball.y,ball.height,ball.width);

            }
            //
//            for(var c=0;c<ani_show_list.length;c++){
//                var ball = ani_show_list[i];
//                ball.width+=1;
//                ball.height+=1;
//                context.drawImage(ball.img, ball.x, ball.y ,ball.height,ball.width);
//
//            }
            context.stroke();
            // 20毫秒后绘制下一帧
           // setTimeout(drawFrame, 1000/60 );
            window.requestAnimFrame(drawFrame);
        }

        function canvasClick(e) {
            // 获取点击的坐标
            var clickX = e.pageX - canvas.offsetLeft;
            var clickY = e.pageY - canvas.offsetTop;

            // 找到点中的小球
            for(var i in balls)
            {
                var ball = balls[i];
                if ((clickX > (ball.x-ball.radius)) && (clickX < (ball.x+ball.radius)))
                {
                    if ((clickY > (ball.y-ball.radius)) && (clickY < (ball.y+ball.radius)))
                    {
                        console.log(balls[i]);
                        click_list.push(balls[i]);   //记录 点击

                        ani_show_list.push(balls[i]); //动画记录

                        balls.splice(i,1);
                        return;
                    }
                }
            }
        }

        //点击后的动画
        function ani_after_c(obj) {
            var obj = click_list[0]
            return obj;
            //context.drawImage(obj.img,20,200,obj.radius+50,obj.radius-10);

        }


    </script>
<div>
    <!--<button onclick="addBall()">添加小球</button>-->
    <!--<button onclick="clearBalls()">清空画布</button>-->
</div>
</body>

</html>